<template>
  <div class="admissionInquiry">
    <div class="operate">
      <div class="left">
        <span class="name">考生姓名</span>
        <el-input
          v-model="searchParams.name"
          placeholder="请输入考生姓名"
          clearable>
        </el-input>
        <span class="name">身份证号码</span>
        <el-input
          v-model="searchParams.cardId"
          placeholder="请输入身份证号码"
          clearable>
        </el-input>
        <span class="name">考生号</span>
        <el-input
          v-model="searchParams.numberExaminee"
          placeholder="请输入考生号"
          clearable>
        </el-input>
        <el-button style="margin-left: 14px;" type="primary" @click="handleSearch">查询</el-button>
      </div>
      <div class="right">
        <el-button type="primary" @click="handleDownLoadTpl">下载导入模板</el-button>
        <el-upload
          style="margin-left: 14px"
          :headers="headers"
          :data="uploadParams"
          action="http://zs.xmafkj.com:4430/prod-api/system/admission/importData"
          accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
          :disabled="loading"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :on-progress="handleUploadProgress"
          :show-file-list="false"
          >
          <el-button type="primary" :loading="loading">
            {{!loading ? "导入" : `导入中 ${loadProgress}%`}}
          </el-button>
        </el-upload>
        <el-button
          style="margin-left: 14px"
          type="primary"
          :disabled="!tableData.length"
          @click="handleClear">清空数据
        </el-button>
        <el-button
          style="margin-left: 14px"
          type="primary"
          :disabled="!tableData.length"
          @click="handleDelete">批量删除
        </el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="numberExaminee" label="考生号"></el-table-column>
      <el-table-column prop="cardId" label="身份证号"></el-table-column>
      <el-table-column prop="speciality" label="录取专业"></el-table-column>
      <el-table-column prop="numbers" label="快递单号"></el-table-column>
      <el-table-column prop="address" label="收件地址"></el-table-column>
    </el-table>
    <div class="pageContain">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getAdmissionList, removeAdmissionList, deleteAdmissionList } from "@/api/student"
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      headers: { Authorization: "Bearer " + getToken() },
      uploadParams: {
        updateSupport: false,
      },
      loadProgress: 0,
      loading: false,

      searchParams: {
        name: "",
        cardId: '',
        numberExaminee: '',
        pageNum: 1,
        pageSize: 100,
      },
      tableData: [],
      total: 0,
      ids: []
    }
  },
  created() {
    this.initTable();
  },
  methods: {
    initTable() {
      getAdmissionList(this.searchParams).then(res => {
        const { code, rows, total } = res;
        if(code === 200) {
          this.tableData = rows;
          this.total = total;
        }
      })
    },
    handleSizeChange(v) {
      this.searchParams.pageNum = 1;
      this.searchParams.pageSize = v;
      this.initTable();
    },
    handleCurrentChange(v) {
      this.searchParams.pageNum = v;
      this.initTable();
    },
    handleSearch() {
      this.initTable();
    },
    handleClear() {
      removeAdmissionList().then(res => {
        this.initTable();
        this.$message({
          message: '清空数据成功',
          type: 'success'
        });
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.cardId);
    },
    handleDelete() {
      const params = {
        cardIds: this.ids.join(",")
      }
      deleteAdmissionList(params).then(res => {
        this.initTable();
        this.$message({
          message: '删除数据成功',
          type: 'success'
        });
      })
    },
    handleDownLoadTpl() {
      this.download('/system/admission/importTemplate', {}, '考生信息.xlsx')
    },
    handleUploadSuccess(success) {
      const { msg, code } = success;
      if(code === 500) {
        this.$message.error(msg || "上传失败，请重试");
      }else {
        this.initTable();
        this.loading = false;
        this.loadProgress = 0;
        this.$message({
          message: '导入成功',
          type: 'success'
        });
      }
    },
    handleUploadError(error) {
      console.log(error)
    },
    handleUploadProgress(event, file, fileList) {
      const { percent } = event;
      this.loading = true; // 显示进度条
      this.loadProgress = percent.toFixed(2);
    },
  }
}
</script>
<style lang="scss" scoped>
div.admissionInquiry {
  div.operate {
    height: 36px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .name {
      font-size: 12px;
      margin-right: 10px;
      &:not(:first-child) {
        margin-left: 10px;
      }
    }
    .el-input {
      width: 180px;
    }
    .right {
      display: flex;
      justify-content: end;
      align-items: center;
    }
  }
}
</style>
